import React, { useState, useContext } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'
import orangeLogo from '../../assets/img/logo_orange.png'
import './Login.less'
import { MyContext } from '../../App.js'
import {actions} from '../../reducer/app'
export default function Login(props) {
  let { dispatch } = useContext(MyContext);
  let [user,setUser] = useState({phone:'',password:''});
  let login = async ()=>{
    let {data:res} = await reqlogin(user);
    if(res.code === 200){
      //弹窗
      Toast.show({content:res.msg});
      //存数据
      dispatch(actions.changeUserInfo(res.list));
      //调页面
      props.history.push('/index');
    }
  }
  return (
    <div className='login'>
      <Header register title="登录"></Header>
      <div className="loginBox">
        <div>{JSON.stringify(user)}</div>
        <img src={orangeLogo} alt="" />
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='username'>
            <Input placeholder='请输入手机号' clearable value={user.phone} onChange={(v) => setUser({...user,phone:v})}/>
          </Form.Item>
          <Form.Item
            label='密码'
            name='password'
          >
            <Input
              placeholder='请输入密码'
              clearable
              type='password'
              value={user.password}
              onChange={(v) => setUser({...user,password:v})}
            />
          </Form.Item>
        </Form>
        <Button onClick={() =>login()} block shape='rounded' color='primary'>
          登录
        </Button>
      </div>

    </div>
  )
}
